<html>
  <head>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600"
    />
    <link rel="stylesheet" href="data/main.css" />
    <script>
      // format the "requested at" datetime with the user's local date format
      // and timezone if the Intl API is available in their browser, otherwise default to UTC
      window.onload = function () {
        var requestedAt = document.getElementById("requestedAt");
        var dateString = requestedAt.textContent;

        if (window.Intl) {
          var formattedDate = new Intl.DateTimeFormat(navigator.language, {
            year: "numeric",
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
            timeZoneName: "short",
          }).format(new Date(dateString));

          requestedAt.textContent = formattedDate;
        }
      };
    </script>
  </head>

  <body>
    <div class="container">
      <div class="header"></div>
      <div class="content">
        <h1>Your requested data</h1>
        <div class="info-grid-container">
          <div class="info-grid">
            <div>Request ID:</div>
            <div>{{ request.id }}</div>
            <div>Request type:</div>
            <div>{{ request.type }}</div>
            {% for identity_type, identity_data in request.identity.items() %}
            <div>{{ identity_data.label }}:</div>
            <div>{{ identity_data.value }}</div>
            {% endfor %}
            <div>Requested at:</div>
            <div id="requestedAt">{{ request.requested_at }}</div>
          </div>
        </div>
        <div class="dsr-information-text">
          <p>
            This web link contains all data requested as part of your Data
            Subject Request (DSR). Your information has been compiled from the
            following areas. Unzip the archive, then click on each section to
            open and view your data.
          </p>
        </div>
        <div class="dataset-list">
          {% for name, link in data.items() %}
          <div class="dataset-item">
            <a href="{{ link }}" class="dataset-link">{{ name }}</a>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </body>
</html>
